<template>
  <div class="Ptt">
    <!-- 顶部页面标题栏 -->
    <!-- <div class="header">
        <div class="backIcon" @click="back">
          <img slot="icon" src="../../assets/transfer/backIcon.png" class="iconImage" />
        </div>
        <div class="theme">一键通</div>
      </div>-->
    <!-- 页面主体信息区域 -->
    <div class="outermostMargin">
      <van-collapse v-model="activeName">
        <van-collapse-item title="基本类" name="1">
          <van-list :finished="true">
            <van-cell v-for="(item, index) in BasicCategories" :key="index" :title="item.name" @click="callOut(item.phone)" />
          </van-list>
        </van-collapse-item>
        <van-collapse-item title="金融类" name="2">
          <van-list :finished="true">
            <van-cell v-for="(item, index) in list[1]" :key="index" :title="item.name" @click="callOut(item.phone)" />
          </van-list>
        </van-collapse-item>
        <van-collapse-item title="政务类" name="3">
          <van-list :finished="true">
            <van-cell v-for="(item, index) in list[2]" :key="index" :title="item.name" @click="callOut(item.phone)" />
          </van-list>
        </van-collapse-item>
        <van-collapse-item title="服务类" name="4">
          <van-list :finished="true">
            <van-cell v-for="(item, index) in list[3]" :key="index" :title="item.name" @click="callOut(item.phone)" />
          </van-list>
        </van-collapse-item>
        <van-collapse-item title="审批类" name="5">
          <van-list :finished="true">
            <van-cell v-for="(item, index) in list[4]" :key="index" :title="item.name" @click="callOut(item.phone)" />
          </van-list>
        </van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>
<script>
  export default {
    name: "Ptt",
    data() {
      return {
        activeName: ["1"],
        list: [
          [],
          [],
          [],
          [],
          []
        ],
        BasicCategories:''
      };
    },
    created() {
      this.requestPostPtt();
    },
    methods: {
      back() {
        this.$router.isBack = true; // 将返回状态置为触发态，以边路由监听触发返回动画
        this.$router.back(); // 路由向后退一步
      },
      callOut(phoneNum) {
        this.$dialog
          .confirm({
            title: "拨打电话",
            message: "是否拨号：" + phoneNum
          })
          .then(() => {
            window.location.href = "tel://" + phoneNum;
          })
          .catch(() => {});
      },
      requestPostPtt() {
        this.post("pushToTalk/load", {})
          .then(res => {
            console.log("Ptt", res.array);
            for (let i = 0; i < res.array.length; i++) {
              // res.array[i]
              this.list[res.array[i].type - 1] = this.list[res.array[i].type - 1].concat(res.array[i]);
              // console.log(i, this.list[i]);
            }
            console.log("ptt", this.list);
            this.BasicCategories = this.list[0]
          })
          .catch(err => {});
      }
    }
  };
</script>
<style lang="scss" scoped>
  @import "~@/smobile.scss";
  .Ptt {
    .header {
      padding: $sm-spaceing-block-sm 0 $sm-spaceing-block-sm 0;
      position: absolute;
      width: $sm-img-per-max;
      height: 21px;
      background: $sm-bg-color;
      z-index: 2;
      display: flex;
      flex-direction: row nowrap;
      justify-content: flex-start;
      .backIcon {
        position: absolute;
        white-space: nowrap;
        height: $sm-icon-px-md;
        z-index: 4;
        .iconImage {
          height: $sm-icon-px-md;
          width: $sm-icon-px-md;
          transform: rotateY(180deg);
        }
      }
      .theme {
        position: absolute;
        font-weight: bold;
        width: $sm-img-per-max;
        text-align: center;
        white-space: nowrap;
        z-index: 3;
      }
    }
    .outermostMargin {
      background: $sm-bg-color-grey;
      color: $sm-text-color;
      font-size: $sm-font-size-lg;
      overflow: auto;
      height: 100vh; // margin: 41px 0 0 0;
    }
  }
</style>